<template>
<!-- 待跟进 -->
  <div class="followAll">
    <TopFilter
      :list="topFilterList"
      :cols="3"
      labelWidth="120"
      @filterChange="changeHandle"
      @onCollapse="collapseHandle"
    ></TopFilter>

    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :rowstyles="rowstyles"
      :onSyncTableData="syncDataChange"
      :datakey="'records'"
      :isSelectColumn="false"
      :onColumnsChange="columns => this.columns = columns"
    >
    <!-- <template slot="controls" slot-scope="props">
        <el-button size="small" type="primary" icon="el-icon-plus" @click="approvalHandle(props)">审批</el-button>
      </template> -->
    </FilterTable>

    <BaseDialog
      :visible.sync="visible"
      title="基盘维系"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <modal  :rowData="formData" @close="closeHandler" />
    </BaseDialog>

    <!-- 明细页面 -->
    <Drawer
      :visible.sync="visibleDrawer"
      title="客户信息"
      :width="1000"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"

    >
      <div class="father" style="float: right;position: relative;z-index: 99;">
        <div class="son">
          <!-- <el-button size="small" type="primary" @click="closeHandler">返回</el-button>
          <el-button size="small" type="primary" @click="continueBuy">批准</el-button>
          <el-button size="small" type="primary" @click="followUp">驳回</el-button>
          <el-button size="small" type="primary" @click="continueBuy">再分配</el-button> -->
          <el-button size="small" type="primary" :disabled="formData.isComplete == 10041001?true:false" @click="followUp">跟进</el-button>
          <el-button size="small" type="primary" @click="continueBuy">续购</el-button>
        </div>
      </div>
      <custsDetail :type="handleType" :rowData="formData" @close="closeHandler" />
    </Drawer>

    <BaseDialog
      :visible.sync="followVisible"
      title="基盘跟进"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <followModal :type="handleType" :baseType="baseType" :rowData="formData" @close="closeHandler_follow" />
    </BaseDialog>

    <Drawer
      :visible.sync="customerVisible"
      title="新增潜客"
      :width="1000"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <cluesModel :type="handleType" :rowData="formData" @close="closeHandler_Customer" />
    </Drawer>
  </div>
</template>

<script>
import { getBasePlateRecord } from '@/api/potenCus/basePlate/basePlateFollow/index';
import {
  getBaseInfoById,
} from '@/api/potenCus/basePlate/cust1Manage';
import { dictionary } from '@/utils/dictMixin';
import { IDNumber, phone,VIN, formatDates, formatDat} from '@/utils/validate'
import modal from './modal'
import moment from 'moment';
import custsDetail from '@/pages/potenCus/basePlate/cust1Manage/custsDetail';
import followModal from './../basePlateFollow/modal'
import cluesModel from './../../customer/potenCusManage/cluesModel';
import { authority } from '@/utils/authMixin';
import { formatdate} from '@/utils/index';
import { getDataType } from '@/assets/js/auth';
import {getUserInfoByRolePosition,getUserInfo} from '@/api/potenCus/customer/exhibition'
export default {
  name: 'followAll',
  mixins: [dictionary,authority],
  components: {
    followModal,
    custsDetail,
    cluesModel,
    modal
  },
  data() {
    return {
      baseType:"follow",
      dataType : getDataType('dataType'),
      topFilterList: this.createTopFilters(),
      fetchParams: {isComplete:10041003},
      visible: false,
      visibleDrawer:false,
      fetchApi: getBasePlateRecord,
      columns: this.createTableColumns(),
      handleType: '',
      formData: {},
      rowstyles: [],
      followVisible: false,   //跟进
      customerVisible:false,
      formData_Customer: {},
      formData_follow: {},
    };
  },
  methods: {

    createTopFilters() {
        return [
            {
            type: 'INPUT',
            label: '潜客名称',
            fieldName: 'potentialcustomerName',
            placeholder: '请输入...',
            initialValue: '',
            style: { width: '240px' },
            },
            {
            type: 'INPUT',
            label: '客户名称',
            fieldName: 'customerName',
            placeholder: '请输入...',
            initialValue: '',
            style: { width: '240px' },
            },
            {
              type: 'INPUT',
              label: '客户电话',
              fieldName: 'mobilePhone',
              placeholder: '',
              style: { width: '240px' },
              // rules: [{ required: true, message: '请输入手机号码', trigger: 'blur' },
              // { trigger: 'blur', validator: phone }]
            },
            {
            type: 'INPUT',
            label: '联系人',
            fieldName: 'contactName',
            placeholder: '请输入...',
            initialValue: '',
            style: { width: '240px' },
            },
            {
              type: 'INPUT',
              label: '联系电话',
              fieldName: 'contactPhone',
              placeholder: '',
              style: { width: '240px' },
              // rules: [{ required: true, message: '请输入手机号码', trigger: 'blur' },
              // { trigger: 'blur', validator: phone }]
            },
            {
              type: 'RANGE_DATE',
              label: '计划跟进日期',
              fieldName: 'planActionDate|planActionDateEnd',
              placeholder: '请输入...',
              initialValue: '',
              style: { width: '240px' },
            },
            {
              type:'INPUT',
              label: 'VIN',
              fieldName: 'vin',
              placeholder: '请输入...',
              initialValue: '',
              style: { width: '240px' },
            },
            {
              type: 'SELECT',
              label: '客户等级',
              fieldName: 'level',
              placeholder: '',
              style: { width: '240px' },
              itemList:this.createDictList('7049') ,
            },
            {
              type: 'SELECT',
              label: '完成状态',
              fieldName: 'isComplete',
              placeholder: '',
              initialValue:'',
              style: { width: '240px' },
              itemList: [{ text: '已完成', value: 10041001 }, { text: '未完成', value: 10041002 }],
            },
            {
              type: 'SELECT',
              label: '销售顾问',
              fieldName: 'consultant',
              placeholder: '',
              style: { width: '240px' },
              itemList: [],
            },
            {
              type: 'SELECT',
              label: '是否逾期',
              fieldName: 'isOverdue',
              placeholder: '请选择',
              style: { width: '240px' },
              itemList: this.createDictList('7044')
            }
        ];
    },
    createTableColumns() {
      return [
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 100,
          fixed: 'left',
          render: (props, h) => {
            return (
              <div>
               <multiuse-button size="mini" type="text" disabled={props.row.isComplete == 10041001?true:false} onClick={() => this.editHandle(props.row)} auth-list={this.auths} auth-mark={'/api/cyxdms.clue/actioned/plateUndeterminedClue'}>
                  跟进
                </multiuse-button>
                <multiuse-button size="mini" type="text" onClick={() => this.showHandle(props.row)} auth-list={this.auths} auth-mark={'/api/cyxdms.clue/clueauditDisc/auditDistPotentialDetail/?actionId=${id}&potentialCustomersId=${potentialCustomersId}&clueType=${clueType}'}>
                  明细
                </multiuse-button>
              </div>
            );
          }
        },
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '客户编号',
          dataIndex: 'potentialCustomerNo',
          sorter: true,
          width:200,
          //filter: true,
          filterType: 'input'
        },
        {
          title: '客户类型',
          dataIndex: 'customerType',
          sorter: true,
          width:200,
          //filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('1523'),
          render: props => {
            return <span>{this.createDictText(props.row.customerType, '1523')}</span>;
          }
        },
        {
          title: '客户名称',
          dataIndex: 'customerName',
          sorter: true,
          filterType: 'input'
        },
        {
          title: '客户电话',
          dataIndex: 'mobilePhone',
          sorter: true,
          width:200,
          //filter: true,
          filterType: 'input'
        },
        {
          title: '联系人',
          dataIndex: 'contactName',
          sorter: true,
          //filter: true,
          width:200,
          filterType: 'input'
        },
        {
          title: '联系人电话',
          dataIndex: 'contactPhone',
          sorter: true,
          filterType: 'input'
        },
        {
          title: '客户等级',
          dataIndex: 'level',
          sorter: true,
          width:200,
          //filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('7049'),
          render: props => {
            return <span>{this.createDictText(props.row.level, '7049')}</span>;
          }
        },
        {
          title: '跟进备注',
          dataIndex: 'taskName',
          sorter: true,
          //filter: true,
          width:200,
          filterType: 'input'
        },
        {
          title: '计划跟进时间',
          dataIndex: 'planActionDate',
          sorter: true,
          initialValue:"",
          filterType: 'input',
          render: props => {
            return <span>{props.row.planActionDate?props.row.planActionDate.split(" ")[0]:""}</span>;
          }
        },
        {
          title: '完成状态',
          dataIndex: 'completeName',
          sorter: true,
          width:200,
          //filter: true,
          filterType: 'input'
        },
        {
          title: '实际跟进时间',
          dataIndex: 'factActionDate',
          sorter: true,
          //filter: true,
          width:200,
          filterType: 'input',
          render: props => {
            return <span>{ formatDates(props.row.factActionDate)}</span>;
          }
        },
        {
          title: '是否逾期',
          dataIndex: 'isOverdue',
          sorter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('7044'),
          render: props => {
            return <span>{this.createDictText(props.row.isOverdue, '7044')}</span>;
          }
        },
        {
          title: '逾期时间',
          dataIndex: 'overdueTime',
          sorter: true,
          width:200,
          //filter: true,
          filterType: 'input'
        },
        {
          title: '跟进情形',
          dataIndex: 'scene',
          sorter: true,
          //filter: true,
          width:200,
          filterType: 'input'
        },
        {
          title: '跟进方式	',
          dataIndex: 'factActionModeName',
          sorter: true,
          filterType: 'input'
        },
        {
          title: '维系目的',
          dataIndex: 'purposeReturn',
          sorter: true,
          width:200,
          //filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('7054'),
          render: props => {
            let purposeReturn=''
            let data=this.createDictList('7054')
            if(props.row.purposeReturn){
              props.row.purposeReturn.split(",").forEach(x=>{
                console.log(x,data,".value")
                data.forEach(L=>{
                  if(x == L.value){
                    purposeReturn+=L.text+"，"
                    console.log(purposeReturn,"维系目的",)
                  }
                })

              })
            }

            return <span>{purposeReturn}</span>;
          }
        },
        {
          title: '维系结果',
          dataIndex: 'actionStatus',
          sorter: true,
          //filter: true,
          width:200,
          filterType: 'checkbox',
          filterItems: this.createDictList('7053'),
          render: props => {
            return <span>{this.createDictText(props.row.actionStatus, '7053')}</span>;
          }
        },
        {
          title: '失效车辆',
          dataIndex: 'vin',
          sorter: true,
          filterType: 'input'
        },
        {
          title: '流失原因',
          dataIndex: 'resultReason',
          sorter: true,
          //filter: true,
          width:200,
          filterType: 'checkbox',
          filterItems: this.createDictList('7055'),
          render: props => {
            return <span>{this.createDictText(props.row.resultReason, '7055')}</span>;
          }
        },
        {
          title: '销售顾问',
          dataIndex: 'consultantName',
          sorter: true,
          filterType: 'input'
        }
      ];
    },
    async init(){
        // 查询所属顾问
      /* await getUserInfo().then(res => {
          if(res.resultCode == 200){
            this.userId=res.data.userInfo.userId
            let param = {
              companyId:res.data.userInfo.companyId,
              positionCode:10061015
            };
            getUserInfoByRolePosition(param).then(res => {
              if(res.resultCode == 200){
                this.RolePosition=res.data.map(x => ({ value: x.userId, text: x.employeeName ,orgId:x.orgId}))
                // this.RolePosition=_.uniqBy(this.RolePosition,'value')
                console.log(this.RolePosition,"this.RolePosition")
                this.topFilterList.find(item=>item.fieldName == "consultant").itemList = this.RolePosition
              }else{
                this.$message.error('获取人员列表失败!');
              }
            })
          }else{
            this.$message.error('获取当前登录用户信息失败!');
          }
        }); */
        let roleType = this.dataType === 'clue' ? '10061012':'10061012,10061015';
        this.getConsultant(1,roleType).then((result) => {
         console.log('顾问列表:' , result);
          this.consults = result;
          // this.consultsList = result
          this.RolePosition= result
          this.topFilterList.find(item=>item.fieldName == "consultant").itemList= result
        })
    },
    syncDataChange (val) {
      // 当天日期
      let currentDate = moment().format('YYYY-MM-DD')
      val.forEach(x=>{
          if(x.isOverdue == 70441001 && x.isComplete == 10041002) {
            // console.log(x,"x")
            this.rowstyles.push({ row:x, styles:{background: '#FFCCCC'} })
          }
          else if(x.planActionDate !='' && x.isComplete == 10041002 ){
            if(moment(x.planActionDate).format('YYYY-MM-DD') == currentDate) {
              this.rowstyles.push({ row:x, styles:{background: '#FAFF69'} })
              // console.log(this.rowstyles,"x")
            }
          }
          // if(x.planActionDate !=''){
          //     // console.log('当天日期',currentDate, moment(x.planActionDate).format('YYYY-MM-DD'))
          //   if(`${moment(x.planActionDate).format('YYYY-MM-DD')}` == `${currentDate}`) {
          //     this.rowstyles.push({ row:x, styles:{background: 'yellow'} })
          //   }else if(`${moment(x.planActionDate).format('YYYY-MM-DD')}` > `${currentDate}`) {
          //     this.rowstyles.push({ row:x, styles:{background: '#fff'} })
          //   }else if(`${moment(x.planActionDate).format('YYYY-MM-DD')}` < `${currentDate}`) {
          //     this.rowstyles.push({ row:x, styles:{background: '#FFCCCC'} })
          //   }
          // }
      })
    },

    //审批
    // approvalHandle(row){
    //   console.log(row,"审批")
    // },
    //跟进
    editHandle(row) {
      console.log(row,"审核")
      this.visible = true;
      this.formData = row;
    },
    //明细
    async showHandle(row){
      console.log(row,"明细")
      // const res = await getBaseInfoById(2507, row.potentialCustomersId, 70241002)
      // console.log('明细id', res)
      this.formData = row;
      this.visibleDrawer=true
    },
    // 跟进
    followUp(){
      this.handleType = 'add';
      this.followVisible = true;
    },
    // 续购
    continueBuy(){
      this.handleType = 'addForbase';
      this.customerVisible = true;
    },
    //搜索
    changeHandle(val) {
        console.log(val,"val")
      this.fetchParams = Object.assign({ sort: 'wayId', order: 'desc'}, val);
    },
    //重置
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    closeHandler(type) {
      this.visible = false;
      this.visibleDrawer=false
      console.log(type,"小菜")
      if (type === 'refresh') {
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
      }
    },
    closeHandler_follow(val, type) {
      this.followVisible = val;
      if (type === 'refresh') {
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
      }
    },
    closeHandler_Customer(val, type) {
      this.customerVisible = val;
      if (type === 'refresh') {
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
      }
    },
  },

  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
    // this.getCookie()
    this.init()

  },
  created() {
  }
};
</script>

<style lang="less" >

</style>
